<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="icon" href="./favicon.ico">
        <link rel="stylesheet" href="./layui/css/layui.css" type="text/css" />
        <script src="./js/vue-2.6.1.js" type="text/javascript"></script>
        <script src="./js/jquery-1.11.1.js" type="text/javascript"></script>
        <script src="./layui/layui.all.js" type="text/javascript"></script>
        <title>demo</title>
    </head>

    <body>

        <!-- html -->
        <table id="table"></table>

        <!-- js -->
        <script>
            let { laytpl, table } = layui;
            let data = [
                {
                    id: '001', name: '张三', age: 22
                },
                {
                    id: '002', name: '李四', age: 33
                },
                {
                    id: '003', name: '王五', age: 44
                }
            ];
            let tableOpts = {
                elem: '#table',
                page: true,
                cols: [
                    [
                        {
                            field: 'id', title: '编号', width: 100
                        },
                        {
                            field: 'name', title: '姓名', width: 100, style: 'background-color: red;color: #fff;'
                        },
                        {
                            field: 'age', title: '年龄', width: 100
                        }
                    ]
                ],
                data: data,

                /**
                 * @description 表格渲染完毕后调用(可以再这里进行表格的行合并)
                 * @param {Object} 异步请求时, res 为接口返回数据, 同步数据时结构为: { data: [], count: 3}
                 * @param {Number} 当前页码
                 * @param {Number} 数据总量
                 */
                done: function(res, curr, count) {
                    console.log(arguments);
                }
            }


            table.render(tableOpts);

            // 表格重载
            setTimeout(() => {
                data.push({
                    id: '004', name: '赵六', age: 55
                });

                // 传递 id 名称, 无需带 # 号
                table.reload('table', tableOpts);
            }, 3000);
        </script>
    </body>

</html>